/**
 * @module 健康协议 
 * @author Yun Tang 
 * @date 2020-05-23 16:50:35 
 */

import React, {useState, useEffect} from 'react';
import { Modal, Checkbox, Button } from 'antd-mobile'

interface Iprops {
  healthVis: boolean;
  close: () => void;
  confirm: () => void;
}
const Home: React.FC<Iprops> = ({healthVis, close, confirm}) => {
  const [disabled, setDisabled] = useState(true)
  const [isRead, setIsRead] = useState(false)

  useEffect(() => {
    if(isRead) {
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }, [isRead])

  useEffect(() => {
    if(!healthVis) {
      setDisabled(true)
    } 
  }, [healthVis])
  
  return (
    <Modal
      visible={healthVis}
      transparent
      className="healthContent"
    >
      <div>
        <header>
          <img src={require('../imgs/icon-lung.png')} alt="lung" className="lung" />
          <img src={require('../imgs/icon-safety.png')} alt="safety" className="safety" />
          <article>
            <p>公共健康</p>
            <p>人人有责</p>
          </article>
          <span className="close" onClick={close}>X</span>
        </header>
        <div className="content">
          <p>健康申明</p>
          <ul>
            <li>本人申明本人身体健康，体温小于37.3℃， 无发烧咳嗽等症状。</li>
            <li>本人最近14天内并无去过疫区, 也无接触过来自疫区的人员。</li>
            <li>本人最近14天内并无接触疑似或确诊新冠肺炎病例。</li>
          </ul>
          <div className="isRead">
            <Checkbox onChange={(e) => {setIsRead(e.target.checked)}}> 已阅读并同意以上内容</Checkbox>
          </div>
          <div className="okBtn">
            <Button type="primary" onClick={confirm} disabled={disabled}>确定</Button>
          </div>
        </div>
      </div>
    </Modal>
  )
}

export default Home